<template>
  <div>
      <!-- 底部 -->
     <div class="product">
          <ul v-infinite-scroll="loadMore">
            <li v-for="item in chocolate">
              <a href="javascript:;">
                <div class="product">
                 <img :src="item.img" alt="">
                  <p class="product-name">{{item.title}}</p>
                </div>
                <p class="product-price">
                &yen;{{item.price}}
                </p>
              </a>
            </li>
          </ul>
        </div>
  </div>
</template>

<script>
 export default {
  data() {
    return {
      chocolate:[
      {"img":"/src/images/shopping/1207048.jpg_80x87.jpg",  
        "title":"巧克巧蔻创意心形礼盒----创意手工巧克力",
        "price":"298",
        "id":"1"},
        {"img":"/src/images/shopping/1207010.jpg_80x87.jpg", 
        "title":"巧克巧蔻定制16粒装手工夹心巧克力",
        "price":"258",
        "id":"2"},
        {"img":"/src/images/shopping/3010001.jpg_80x87.jpg",
        "title":"精美玻璃花瓶",
        "price":"38",
        "id":"3"},
        {"img":"/src/images/shopping/3010003.jpg_80x87.jpg",  
        "title":"德芙心语98克铁盒或109克礼盒",
        "price":"68",
        "id":"4"},
        {"img":"/src/images/shopping/3010008.jpg_80x87.jpg",  "title":"德芙精心之选140克或恋语150g",
        "price":"105",
        "id":"5"}
      ]
    };
  },
  methods: {
  }
}; 
</script>
<style lang="css" scoped>
/* 底部 */
.concent .recommend .product {
  overflow: hidden;
}
.concent .recommend .product ul {
  width: 2000px;
  height: 139px;
}
.concent .recommend .product li{
  float: left;
  width: 90px;
  padding: 0 5px;
  margin-right: 10px;
}
.concent .recommend .product li .product img {
  height: 87px;
}
.concent .recommend .product li .product-name {
  margin: 0;
  font-size: 10px;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.concent .recommend .product li .product-price {
  text-align: center;
  color: #fe6600;
}
</style>

